<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { getDisasterByYear, getDisaster, lookAlarm, lookAlarmDocUrl } from '../../network/net.js'
import { formatTime, addHours } from "../../utils/cTime.js"
import { activeMenu, bmInfo } from '../../stores/chun.js'
import iconWaveNo from '../../assets/img/wave-no.png'
import iconFbcNo from '../../assets/img/fbc-no.png'
import iconGantan from '../../assets/img/感叹号.png'
import iconWaveLan from '../../assets/img/wave_lan_simple.png'
import iconWaveHuang from '../../assets/img/wave_huang_simple.png'
import iconWaveHong from '../../assets/img/wave_hong_simple.png'
import iconWaveCheng from '../../assets/img/wave_cheng_simple.png'
import iconWaveInfo from '../../assets/img/wave_info_simple.png'
import iconStormLan from '../../assets/img/fbc_lan_simple.png'
import iconStormHuang from '../../assets/img/fbc_huang_simple.png'
import iconStormHong from '../../assets/img/fbc_hong_simple.png'
import iconStormCheng from '../../assets/img/fbc_cheng_simple.png'
import iconStormInfo from '../../assets/img/fbc_info_simple.png'
import iconClose from '../../assets/img/关闭.png';
import { bmName } from '@/stores/chun.js';
import ComPdfW from "../../components/ComPdfW.vue";



let token = sessionStorage.getItem('token')

const docurl = import.meta.env.VITE_backurl_warndoc;
onMounted(() => {
  getHomeAlarm()
})


const homeAlarm = ref([])
const alarmYears = ref([])
const alarmYear = ref(new Date().getFullYear())
const activeTab = ref('海浪警报')
const currentAlarm = ref([])
const hisAlarms = reactive({
  '海浪警报': [
    {
      date: '2023-06-11 10:28',
      value: '海浪蓝色警报'
    },
    {
      date: '2023-06-11 10:28',
      value: '海浪黄色警报'
    },
    {
      date: '2023-06-11 10:28',
      value: '海浪橙色警报'
    }
  ],
  '风暴潮警报': [
    {
      date: '2023-06-11 10:28',
      value: '风暴潮蓝色警报'
    },
    {
      date: '2023-06-11 10:28',
      value: '风暴潮黄色警报'
    },
    {
      date: '2023-06-11 10:28',
      value: '风暴潮红色警报'
    },
  ]
})

let year = new Date().getFullYear()
for (let i = 0; i < 5; i++) {
  alarmYears.value.push({
    value: year - i,
    label: year - i + '年'
  })
}

const getHomeAlarm = () => {
  homeAlarm.value = []
  let types = ['wave', 'storm']
  types.forEach(type => {
    getDisaster(token, type, bmName.value).then(res => {
      let dd = res.data.data.sort((a, b) => {
        return new Date(b.publishDate) - new Date(a.publishDate)
      })

      if (res.data.code != 500) {
        if (dd.length > 0) {
          homeAlarm.value.push({
            date: formatTime(dd[0].publishDate),
            value: (type == 'wave' ? '海浪' : '风暴潮') + dd[0].warnName,
            url: dd[0].warnUrl
          })
        }
      }
    })
  })
}


const getAlarmData = () => {
  currentAlarm.value = []
  let type = activeTab.value == '海浪警报' ? 'wave' : 'storm'
  getDisaster(token, type).then(res => {
    currentAlarm.value = res.data.data?.map(item => {
      return {
        date: formatTime(item.publishDate),
        value: (activeTab.value == '海浪警报' ? '海浪' : '风暴潮') + item.warnName,
        url: 'https://xxs.dhybzx.org:3000/qsxcx/warndoc/' + item.warnUrl

      }
    })
  })
}

const getChDate1 = (date) => {
  let dateArr = date.split(' ')[0].split('-')
  let hour = date.split(' ')[1].split(':')[0]
  return `${dateArr[1]}月${dateArr[2]}日 ${hour}时`
}

const getAlarmColor = (value) => {
  if (value.includes('蓝色')) {
    return '#4A90E2'
  } else if (value.includes('黄色')) {
    return '#8F8839'
  } else if (value.includes('橙色')) {
    return '#F5A623'
  } else if (value.includes('红色')) {
    return '#D0021B'
  } else {
    // 绿色
    return '#7ED321'
  }
}

const getAlarmImg = (value) => {
  if (value.includes('海浪')) {
    if (value.includes('蓝色')) {
      return iconWaveLan
    } else if (value.includes('黄色')) {
      return iconWaveHuang
    } else if (value.includes('橙色')) {
      return iconWaveCheng
    } else if (value.includes('红色')) {
      return iconWaveHong
    } else {
      return iconWaveInfo
    }
  } else {
    if (value.includes('蓝色')) {
      return iconStormLan
    } else if (value.includes('黄色')) {
      return iconStormHuang
    } else if (value.includes('橙色')) {
      return iconStormCheng
    } else if (value.includes('红色')) {
      return iconStormHong
    } else {
      return iconStormInfo
    }
  }
}

watch([alarmYear, activeTab, bmName], () => {

  let bmId = bmInfo.value.find((item) => item.name == bmName.value)?.id;
  console.log('部门ID: ', bmId);
  let type = activeTab.value == '海浪警报' ? 'wave' : 'storm'
  hisAlarms[activeTab.value] = []
  getDisasterByYear(token, type, alarmYear.value, bmId).then(res => {
    res.data.data?.forEach(item => {
      let str = '';
      if (item.warnName == '解除') {
        str = '通报'
      } else if (item.warnName == '消息') {
        str = ''
      } else {
        str = '警报'
      }
      hisAlarms[activeTab.value].push({
        date: formatTime(item.publishDate).split(':')[0],
        value: item.warnName + str,
        // url :`/${item.parentDirectory}/${item.warnUrl}`
        url: docurl + '/' + item.parentDirectory + '/' + item.warnUrl
      })
    })
  })
  getAlarmData()

}, {
  immediate: true
})

const pdfDialog = ref(false)
let urlObj = {}

const lookAlarmDo = (item) => {

  let url = item.url
  url = url.replace(/\.doc?$/, '.pdf');

  lookAlarmDocUrl(url).then(res => {

    if (res.status == 200) {
      urlObj = res.data
      pdfDialog.value = true
    }
  }).catch(err => {
    console.log(err)
  })
}

</script>

<template>
  <div class="jbpop" :class="activeMenu?.title == '灾害警报' ? 'jbHis' : 'jbWu'">
    <template v-if="activeMenu?.title == '灾害警报'">
      <div id="jbpop_info">
        <img :src="iconClose" alt="" style="position: absolute;right: 10px;top: 10px;height: 15px;"
          @click="activeMenu = ''">
        <div
          style="display: flex;height: 46px;background-color: #006FFA22;border-radius: 18px 18px 18px 18px;align-items: center;justify-content: space-around;margin: 12px 12px;width: calc(100% - 24px);transition: all 0.3s;overflow: hidden;">

          <div class="zhai_t" v-for="item in ['海浪警报', '风暴潮警报']" @click="activeTab = item"
            :style="{ color: activeTab == item ? '#FFFFFF' : '', backgroundColor: activeTab == item ? '#006FFA' : '' }">
            {{ item }}
            <img v-if="homeAlarm.filter(v => v.value.includes((item == '海浪警报' ? '海浪' : '风暴潮'))).length > 0"
              :src="iconGantan" alt="" style="position: absolute;right: 15px;height: 15px;">
          </div>
        </div>
        <template v-if="currentAlarm.length == 0">
          <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
            <img class="zhai_no_img" :src="activeTab == '海浪警报' ? iconWaveNo : iconFbcNo" alt="">
            <div class="zhai_no_txt">24小时内暂无警报</div>
          </div>
        </template>
        <template v-else>
          <div class="zhai_his">
            <div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
              <div style="font-family: 'aliph500';font-size: 18px;">当前警报</div>
            </div>


            <el-scrollbar height="200px">
              <div v-for="item in currentAlarm" class="his_item">
                <div class="his_time">{{ item.date }}</div>
                <div class="his_value" :style="{ color: getAlarmColor(item.value) }">{{ item.value }}
                </div>
                <a :href="item.url" target="_blank">查看</a>
              </div>
            </el-scrollbar>
          </div>
        </template>


        <div class="zhai_his">
          <div style="display: flex;align-items: center;justify-content: space-around;width: 100%;">
            <div style="font-family: 'aliph500';font-size: 18px;">历史警报</div>
            <el-select v-model="alarmYear" placeholder="请选择" size="" style="width: 105px">
              <el-option v-for="item in alarmYears" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>

          <template v-if="hisAlarms[activeTab].length > 0">
            <el-scrollbar>
              <div v-for="item in hisAlarms[activeTab]" class="his_item">
                <div class="his_time">{{ getChDate1(item.date) }}</div>
                <div class="his_value" :style="{ color: getAlarmColor(item.value) }">{{ item.value }}
                </div>
                <el-button type="primary" size="small" @click="lookAlarmDo(item)">查看</el-button>

              </div>
            </el-scrollbar>
          </template>
          <template v-else>
            <div class="zhai_no_txt" style="margin-top: 50px;">本年度无警报</div>
          </template>

        </div>
      </div>
    </template>
    <template v-else>
      <div class="jb_home_item" v-for="item in homeAlarm" v-if="homeAlarm.length > 0">
        <img :src="getAlarmImg(item.value)" alt="">
      </div>
      <div v-else>
        <div
          style="background-color: #6097FA;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);height: 60px;display: flex;align-items: center;justify-content: space-around;font-family: 'yy400';opacity: 0.9;color: aliceblue;">
          <img src="../../assets/img/alarm.png" alt="" style="height: 30px;">
          24小时内无灾害警报
        </div>
      </div>
    </template>
  </div>

  <div v-if="pdfDialog" id="pdfDia">
    <img :src="iconClose" alt="" srcset="" @click="pdfDialog = false" />
    <ComPdfW v-if="pdfDialog" :urlObj="urlObj" style="height: 80vh" />
  </div>
</template>

<style lang="less" scoped>
.jbpop {
  position: fixed;
  top: 25px;
  left: 10px;
  width: 244px;
  height: 60px;
  // background: #E4E4E4;
  font-family: 'aliph500';
  font-size: 20px;
  color: #000000;
  z-index: 999;
  letter-spacing: 2px;
  border-radius: 10px;
  transition: all 0.3s;
  // 阴影
  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
}

.jb_home_item {
  img {
    height: 60px;
  }
}

// .jbWu {
//   // display: flex;
//   // justify-content: center;
//   // align-items: center;
// }

.jbHis {
  width: 400px;
  height: 80vh;

  #jbpop_info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // overflow: hidden;
    background: #E4E4E4;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding-top: 20px;
    background: #EEF2F7;

    .zhai_t {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: 'aliph500';
      cursor: pointer;
      position: relative;
      // overflow: hidden;
      transition: all 0.3s;
    }

    .zhai_no_img {
      width: 200px;
      height: 200px;
      // margin-top: 20px;
      margin-bottom: 10px;
    }

    .zhai_no_txt {
      font-size: 24px;
      color: #666;
      opacity: .7;
      letter-spacing: 4px;
      font-family: 'aliph500';
      width: calc(100% - 24px);
      text-align: center;
      padding-bottom: 10px;
      height: 30px;
    }

    .zhai_his {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: space-between;
      // flex: 1;
      height: 44vh;
      background: #FFFFFF;

      :deep(.el-scrollbar) {
        width: 100%;
        height: 100%;
        background: #FFFFFF;

        .el-scrollbar__wrap {
          height: 100% !important;
        }
      }

      .his_item {
        width: calc(100% - 24px);
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #E4E4E4;

        .his_time {
          font-size: 14px;
          font-family: 'aliph400';
          color: #666;
        }

        .his_value {
          font-size: 14px;
          font-family: 'aliph400';
          color: #666;
        }

        a {
          font-size: 14px;
          font-family: 'aliph400';
          color: #666;
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }

  }
}

#pdfDia {
  z-index: 9999;
  position: fixed;
  left: 25%;
  top: 10vh;
  width: 50%;
  padding-top: 30px;
  background-color: #ffffff;
  height: 80vh;

  img {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 999;
    height: 20px;
  }
}
</style>